<template>
	<div style="height: 100%">
		<a-tabs default-active-key="styles" size="small">
			<a-tab-pane key="styles" :tab="i18n('componentStyle.style','风格')">
				<component-style :curComponent="curComponent"></component-style>
				<a-collapse default-active-key="1" :bordered="false">
					<template #expandIcon="props">
                        <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
					</template>
					<a-collapse-panel key="1" :header="weatherI18n('temperatureStyle','温度文本样式')">
						<a-row>
							<a-col :span="12">
								<a-form-item :label="i18n('componentStyle.fontSize','字体大小')+'(px)'">
									<a-input class="laWidth" :placeholder="weatherI18n('inputContent','输入内容')" type="number" v-model:value="config.styles.temperatureStyle.fontSize"></a-input>
								</a-form-item>
							</a-col>
							<a-col :span="12">
								<a-form-item :label="i18n('componentStyle.fontColor','字体颜色')">
									<a-input class="laWidth" v-model:value="config.styles.temperatureStyle.color"  type="color"/>
								</a-form-item>
							</a-col>
						</a-row>
						<a-row>
							<a-col :span="12">
								<a-form-item :label="weatherI18n('fontStyle','字体样式')">
									<a-select class="laWidth" v-model:value="config.styles.temperatureStyle.fontWeight">
										<a-select-option value="normal">{{i18n('componentStyle.normal','正常')}}</a-select-option>
										<a-select-option value="bold">{{i18n('componentStyle.bold','加粗')}}</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
						</a-row>
					</a-collapse-panel>
					<a-collapse-panel key="2" :header="weatherI18n('otherStyles','其它文本样式')">
						<a-row>
							<a-col :span="12">
								<a-form-item :label="i18n('componentStyle.fontSize','字体大小')+'(px)'">
									<a-input class="laWidth" :placeholder="weatherI18n('inputContent','输入内容')" type="number" v-model:value="config.styles.otherStyle.fontSize"></a-input>
								</a-form-item>
							</a-col>
							<a-col :span="12">
								<a-form-item :label="i18n('componentStyle.fontColor','字体颜色')">
									<a-input class="laWidth" v-model:value="config.styles.otherStyle.color"  type="color"/>
								</a-form-item>
							</a-col>
						</a-row>
						<a-row>
							<a-col :span="12">
								<a-form-item :label="weatherI18n('fontStyle','字体样式')">
									<a-select class="laWidth" v-model:value="config.styles.otherStyle.fontWeight">
										<a-select-option value="normal">{{i18n('componentStyle.normal','正常')}}</a-select-option>
										<a-select-option value="bold">{{i18n('componentStyle.bold','加粗')}}</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
						</a-row>
					</a-collapse-panel>
					<a-collapse-panel key="3" :header="weatherI18n('template','模板')">
						<a-radio-group v-model:value="config.styles.template" style="margin-bottom: 10px">
							<a-radio :value="1">
								{{weatherI18n('weatherTemplate','天气模板')}}1
							</a-radio>
							<a-radio :value="2">
								{{weatherI18n('weatherTemplate','天气模板')}}2
							</a-radio>
						</a-radio-group>
					</a-collapse-panel>
				</a-collapse>
			</a-tab-pane>
		</a-tabs>
	</div>
</template>

<script>
/**
 * 天气
 */
import ComponentDef from "@/views/modules/design/right-component/common/component-def.js";

export default {
	name: "WeatherDef",
	mixins:[ComponentDef],
	data() {
		return {}
	},
	created() {
	},
	methods: {
		i18n(name,text,key){
			return this.$ti18(name,text,"componentStyleLang",key);
		},
		weatherI18n(name,text,key){
			return this.$ti18(name,text,"weatherLang",key);
		},
	},
	watch: {}
}
</script>

<style scoped>
.laWidth{
	width:175px
}
</style>
